<template>
	<view :class="themeStyle">
		<view class="address-edit-content">
			<view class="edit-wrap">
				<view class="edit-item">
					<text class="tit">{{ $lang('consignee') }}</text>
					<input class="uni-input" type="text" :placeholder="$lang('consigneePlaceholder')" maxlength="30" name="name" value=""
					 v-model="formData.name" />
				</view>
				<view class="edit-item">
					<text class="tit">{{ $lang('mobile') }}</text>
					<input class="uni-input" type="number" :placeholder="$lang('mobilePlaceholder')" maxlength="11" value="" v-model="formData.mobile" />
				</view>
				<view class="edit-item">
					<text class="tit">{{ $lang('telephone') }}</text>
					<input class="uni-input" type="text" :placeholder="$lang('telephonePlaceholder')" maxlength="20" value="" v-model="formData.telephone" />
				</view>
				
				<!-- <view class="edit-item">
					<text class="tit">{{ $lang('receivingCity') }}</text>
					<pick-regions :default-regions="defaultRegions" @getRegions="handleGetRegions">
						<text class="select-address" :class="{ empty: !formData.full_address }">{{ formData.full_address ? formData.full_address : '请选择省市区县' }}</text>
					</pick-regions>
				</view> -->
				
				<view class="edit-item">
					<text class="tit">{{ $lang('receivingCity') }}</text>
					<input class="uni-input" type="text"  maxlength="20" value="" placeholder="请选择收货地址" v-model="formData.full_address" @click="popShow = true" />
				</view>
				
				<!-- 选择地址弹窗 -->
				<u-popup v-model="popShow" mode="bottom"  height="80%" border-radius="20">
					<view class="lch_pop">
						<view class="lch_pop_tit">请选择地址</view>
						<view class="lch_pop_conwrap">
							<view class="lch_pop_con" v-for="(item,index) in popCon" :key="index" :style="bottomSta == index ? 'border-bottom: 4rpx solid #007aff;':''" @click="popConBtn(item,index)">{{item.name}}</view>
							<view class="lch_pop_con" v-show="popCon.length < 4" :style="bottomSta == 4 ? 'border-bottom: 4rpx solid #007aff;':''" @click="popConBtn('',4)">请选择</view>
						</view>
						<view class="lch_pop_List">
							<view class="lch_pop_List_min" v-for="(item,index) in popList" :key="index" @click="popBtn(item.name,item.id)" :style="bottomSta < 4 && item.id == popCon[bottomSta].id ? 'color: #007aff':''">{{item.name}}</view>
						</view>
					</view>
				</u-popup>
				

				<view class="edit-item">
					<text class="tit">{{ $lang('address') }}</text>
					<input class="uni-input" type="text" :placeholder="$lang('addressPlaceholder')" maxlength="50" v-model="formData.address" />
					<!-- #ifdef MP-WEIXIN -->
					<text @click="selectAddress" class="iconfont icondizhi"></text>
					<!-- #endif -->
				</view>
			</view>
			<button type="primary" class="add" @click="saveAddress">{{ $lang('save') }}</button>
			<loading-cover ref="loadingCover"></loading-cover>
		</view>
	</view>

</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue';
	import validate from 'common/js/validate.js';
	export default {
		components: {
			pickRegions
		},
		computed: {
			//vueX页面主题
			themeStyle() {
				return 'theme-' + this.$store.state.index.themeStyle
			}
		},
		data() {
			return {
				popShow:false,
				popCon:[],
				popConSta: 0,
				popList:[],
				listAr:[],
				popIdA:'',
				popIdB:'',
				popIdC:'',
				popIdD:'',
				bottomSta: 4,
				vehicleModel:'',
				formData: {
					id: 0,
					name: '',
					mobile: '',
					telephone: '',
					province_id: '',
					city_id: '',
					district_id: '',
					community_id: '',
					address: '',
					full_address: '',
					latitude: 0,
					longitude: 0,
					is_default: 1
				},
				address: '',
				addressValue: '',
				back: '', // 返回页
				redirect: 'redirectTo', // 跳转方式
				flag: false, //防重复标识
				defaultRegions: []
			};
		},
		onLoad(option) {
			console.log('option',option);
			if (option.id) {
				this.formData.id = option.id;
				this.getAddressDetail();
			}
			if (option.back) this.back = option.back;
			if (option.redirect) this.redirect = option.redirect;
			this.popListFun();
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
		},
		onReady() {
			this.$refs.loadingCover.hide();
		},
		onHide() {
			this.flag = false;
		},
		methods: {
			// 获取地址信息
			getAddressDetail() {
				this.$api.sendRequest({
					url: '/api/memberaddress/info',
					data: {
						id: this.formData.id
					},
					success: res => {
						let data = res.data;
						if (data != null) {
							this.formData.name = data.name;
							this.formData.mobile = data.mobile;
							this.formData.telephone = data.telephone;
							this.formData.address = data.address;
							this.formData.full_address = data.full_address;
							this.formData.latitude = data.latitude;
							this.formData.longitude = data.longitude;
							this.formData.is_default = data.is_default;
							this.defaultRegions = [data.province_id, data.city_id, data.district_id];
							
							// 拿取地址数据反向渲染选择器
							this.popIdA = data.province_id;
							this.popIdB = data.city_id;
							this.popIdC = data.district_id;
							this.popIdD = data.community_id;
							let arr = data.full_address.split('-');
							let conObjA = {
								name: arr[0],
								id: this.popIdA
							}
							let conObjB = {
								name: arr[1],
								id: this.popIdB
							}
							let conObjC = {
								name: arr[2],
								id: this.popIdC
							}
							let conObjD = {
								name: arr[3],
								id: this.popIdD
							}
							this.popCon = [conObjA,conObjB,conObjC,conObjD];
							this.popConSta = 3;
							this.popBtn(conObjC.name,conObjC.id);
							this.popCon = [conObjA,conObjB,conObjC,conObjD];
							this.vehicleModel = this.popCon[0].name + '/' + this.popCon[1].name + '/' + this.popCon[2].name + '/' + this.popCon[3].name; 
							this.bottomSta = 3;
							this.TwoList(1);
							this.TwoList(2);
							
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			// 获取选择的地区
			handleGetRegions(regions) {
				console.log(regions,'打印')
				this.formData.full_address = '';
				this.formData.full_address += regions[0] != undefined ? regions[0].label : '';
				this.formData.full_address += regions[1] != undefined ? '-' + regions[1].label : '';
				this.formData.full_address += regions[2] != undefined ? '-' + regions[2].label : '';
				this.addressValue = '';
				this.addressValue += regions[0] != undefined ? regions[0].value : '';
				this.addressValue += regions[1] != undefined ? '-' + regions[1].value : '';
				this.addressValue += regions[2] != undefined ? '-' + regions[2].value : '';
			},
			selectAddress() {
				uni.chooseLocation({
					success: res => {
						this.formData.latitude = res.latitude;
						this.formData.longitude = res.longitude;
						this.formData.address = res.name;
					}
				});
			},
			vertify() {
				this.formData.name = this.formData.name.trim();
				this.formData.mobile = this.formData.mobile.trim();
				this.formData.address = this.formData.address.trim();
				var rule = [{
						name: 'name',
						checkType: 'required',
						errorMsg: '请输入姓名'
					},
					{
						name: 'mobile',
						checkType: 'required',
						errorMsg: '请输入手机号'
					},
					{
						name: 'mobile',
						checkType: 'phoneno',
						errorMsg: '请输入正确的手机号'
					},
					{
						name: 'full_address',
						checkType: 'required',
						errorMsg: '请选择省市区县'
					},
					{
						name: 'address',
						checkType: 'required',
						errorMsg: '详细地址不能为空'
					}
				];
				var checkRes = validate.check(this.formData, rule);
				if (checkRes) {
					return true;
				} else {
					this.$util.showToast({
						title: validate.error
					});
					this.flag = false;
					return false;
				}
			},
			saveAddress() {
				if (this.flag) return;
				
				this.flag = true;
				if (this.vertify()) {
					let addressValueArr = this.addressValue.split('-'),
						data = {},
						url = '';
					
					data = {
						name: this.formData.name,
						mobile: this.formData.mobile,
						telephone: this.formData.telephone,
						province_id: this.popIdA,
						city_id: this.popIdB,
						district_id: this.popIdC,
						community_id: this.popIdD,
						// community_id: addressValueArr[3],
						address: this.formData.address,
						full_address: this.formData.full_address,
						latitude: this.formData.latitude,
						longitude: this.formData.longitude,
						is_default: this.formData.is_default
					};

					url = 'add';
					if (this.formData.id) {
						url = 'edit';
						data.id = this.formData.id;
					}
					console.log("this.back",this.back);

					this.$api.sendRequest({
						url: '/api/memberaddress/' + url,
						data: data,
						success: res => {
							this.flag = false;
							if (res.code == 0) {
								if (this.back != '' && url != 'edit') {
									// this.$util.redirectTo(this.back, {}, this.redirect);
									let jump = true;
									// let arr = getCurrentPages().reverse();
									// for (let i = 0; i < arr.length; i++) {
									// 	if (this.back.indexOf(arr[i].route) != -1) {
									// 		jump = false;
									// 		uni.navigateBack({
									// 			delta: i
									// 		});
									// 		break;
									// 	}
									// }
									if (jump) {
										this.$util.redirectTo(this.back,{}, 'redirectTo');
									}

								} else {
									this.$util.showToast({
										title: res.message
									});
									uni.navigateBack({
										delta: 1
									});
								}
							} else {

							}
						},
						fail: res => {
							this.flag = false;
						}
					});
				}
			},
			
			
			// 拿城市列表
			popListFun(){
				this.popConSta = 0;
				this.$api.sendRequest({
					url: '/api/address/lists',
					success: res => {
						// console.log(res,'列表')
						if (res.code >= 0) {
							this.popList = res.data;
							this.listAr[this.popConSta] = res.data;
							this.popConSta += 1;
						}
					}
				});
			},
			
			// 点击获取下一级
			popBtn(val,id){
				let sta = this.popCon.length;
				let posData = {};
				let urlCon = '';
				
				let obj = {
					name:val,
					id:id
				}
				
				this.bottomSta = 4;

				if(this.popConSta == 1){
					this.popIdA = id;
					urlCon = '/api/address/lists';
					posData = {
						'pid' : this.popIdA
					}
					let arr = this.popCon;
					arr.splice(1);
					this.popCon = arr;
					this.popCon[0] = obj;
				}else if(this.popConSta == 2){
					this.popIdB = id;
					urlCon = '/api/address/lists';
					posData = {
						'pid' : this.popIdB,
						// 'series_name_id' : this.popIdB
					}
					let arr = this.popCon;
					arr.splice(2);
					this.popCon = arr;
					this.popCon[1] = obj;
				}else if(this.popConSta == 3){
					this.popIdC = id;
					urlCon = '/api/address/lists';
					posData = {
						'pid' : this.popIdC,
						// 'series_name_id' : this.popIdB,
						// 'model_year': this.popIdC
					}
					let arr = this.popCon;
					arr.splice(3);
					this.popCon = arr;
					this.popCon[2] = obj;
				}else if(this.popConSta == 4){
					this.popIdD = id;
					this.popCon[3] = obj;
					// console.log(this.popIdA,this.popIdB,this.popIdC,this.popIdD,'最后');
					this.popShow = false;
					this.formData.full_address = this.popCon[0].name + '-' + this.popCon[1].name + '-' + this.popCon[2].name + '-' + this.popCon[3].name; 
					this.bottomSta = 3;
					return;
				}else{
					this.popIdD = id;
					this.popCon[3] = obj;
					// console.log(val,id,'最后');
					this.popShow = false;
					this.formData.full_address = this.popCon[0].name + '-' + this.popCon[1].name + '-' + this.popCon[2].name + '-' + this.popCon[3].name; 
					this.bottomSta = 3;
					return;
				}
				let that = this;
				this.$api.sendRequest({
					url: urlCon,
					data: posData,
					success: res => {
						// console.log(res,'拿取下一级')
						if (res.code >= 0) {
							this.popList = res.data;
							this.listAr[this.popConSta] = res.data;
							this.popConSta += 1;
						}else{
							uni.showToast({
								title:res.message,
								icon:'none'
							})
						}
					}
				});
			},
			
			
			// 选择某一项
			popConBtn(con,e){
				this.bottomSta = e;
				// console.log(con,e)
				if(e < 4){
					this.popConSta = e+1;
					if(e == 0){
						this.popListFun();
					}else{
						this.popList = this.listAr[e];
					}
				}else{
					this.popList = this.listAr[this.listAr.length-1];
				}
				
			},
			
			// 再次拿列表
			TwoList(e){
				let urlCon = '/api/address/lists';
				let posData = {}
				if(e == 1){
					posData = {
						'pid' : this.popIdA,
					}
				}else if(e == 2){
					posData = {
						'pid' : this.popIdB,
					}
				}
				this.$api.sendRequest({
					url: urlCon,
					data: posData,
					success: res => {
						if (res.code >= 0) {
							this.listAr[e] = res.data;
						}else{
							uni.showToast({
								title:res.message,
								icon:'none'
							})
						}
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	// [data-theme] {
		.edit-wrap {
			margin: 20rpx;
			background: #fff;
			border-radius: $ns-border-radius;
			overflow: hidden;
		}

		.edit-item {
			display: flex;
			align-items: center;
			margin: 0 30rpx;
			height: 100rpx;
			background-color: #fff;

			.tit {
				width: 120rpx;
				font-size: $uni-font-size-lg - 2rpx;
			}

			.select-address {
				display: inline-block;
				font-size: $ns-font-size-base;
				margin-left: 10rpx;

				&.empty {
					color: #808080;
				}
			}

			input {
				flex: 1;
				font-size: $uni-font-size-lg - 2rpx;
				margin-left: 20rpx;
				padding: 0;
				margin-right: 20rpx;
			}
		}

		.edit-wrap>.edit-item+.edit-item {
			border-top: 2rpx solid #ebedf0;
		}

		.add {
			margin-top: 60rpx !important;
		}
	// }
	.lch_pop{
		width: 100%;
		height: 100%;
		// background-color: teal;
	}
	.lch_pop_tit{
		font-size: 30rpx;
		font-weight: bold;
		height: 8.5%;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 2rpx solid #eee;
	}
	.lch_pop_conwrap{
		min-width: 100%;
		height: 11.2%;
		border-bottom: 2rpx solid #eee;
		display: flex;
		justify-content: left;
		padding: 0 30rpx 4rpx;
		overflow-y: hidden;
		overflow-x: scroll;
	}
	.lch_pop_con{
		height:100%;
		display: flex;
		align-items: center;
		// background-color: red;
		font-size: 28rpx;
		color: #333333;
		margin-right: 30rpx;
		white-space:nowrap;
		
	}
	.lch_pop_List{
		width: 100vw;
		height: 80%;
		// background-color: pink;
		overflow: hidden;
		overflow-y: auto;
	}
	.lch_pop_List_min{
		width: 100vw;
		height: 120rpx;
		border-bottom: 2rpx solid #eee;
		line-height: 120rpx;
		padding-left: 30rpx;
		font-size: 28rpx;
		color: #333333;
	}
</style>
